/* eslint-disable react/display-name */
/**
 * 去掉了 tooltipMaxWidth，完全可采用 tooltipStyle 实现
 * container 支持函数
 */
import React, { FC, forwardRef, MouseEvent, useMemo, useRef, useState } from 'react';
import PopperFlow, { PopperProps } from './PopperFlow';

/** FUCK 这里必须有个any，否则调用WrappedComponent时会报错 */
type RefFC<T> = React.ForwardRefExoticComponent<React.PropsWithoutRef<T> & React.RefAttributes<HTMLDivElement>>;

function withHover(WrappedComponent: RefFC): RefFC {
  return forwardRef((props, _ref) => {
    const { onMouseEnter, onMouseLeave, ...rest } = props;
    const [isHovered, setIsHovered] = useState(false);

    const handleMouseEnter = (e: MouseEvent<HTMLElement>) => {
      if (onMouseEnter) {
        onMouseEnter(e);
      }
      setIsHovered(true);
    };

    const handleMouseLeave = (e: MouseEvent<HTMLElement>) => {
      if (onMouseLeave) {
        onMouseLeave(e);
      }
      setIsHovered(false);
    };

    return (
      <WrappedComponent
        onMouseEnter={handleMouseEnter}
        ref={_ref}
        showTooltip={isHovered}
        onMouseLeave={handleMouseLeave}
        {...rest}
      />
    );
  });
}

/**
 *
 * @param showTooltipFn 展示tooltip的额外判断
 * @returns
 */
function withExtraCondition<P extends { showTooltip?: boolean }>(
  WrappedComponent: RefFC<P>,
  showTooltipFn: (target: HTMLDivElement | null) => boolean
): RefFC<P> {
  //
  return forwardRef<HTMLDivElement, P>((props, _ref) => {
    console.log(props);
    const targetNode = useRef<HTMLDivElement | null>(null);
    const refFn = (ele: HTMLDivElement | null) => {
      if (typeof _ref === 'function') {
        _ref(ele);
      } else if (_ref) {
        _ref.current = ele;
      }
      targetNode.current = ele;
    };

    const { showTooltip: _show, ...rest } = props;
    const showTooltip = useMemo(() => {
      return _show && showTooltipFn(targetNode.current);
    }, [_show]);

    return <WrappedComponent showTooltip={showTooltip} ref={refFn} {...rest} />;
  });
}

export type TooltipProps = Omit<PopperProps, 'showTooltip'> & {
  /** 否展示tooltip的额外判断 */ showTooltipFn?: (target: HTMLDivElement | null) => boolean;
};

// const Fn1 = withExtraCondition(PopperFlow, showTooltipFn);
const ReactPopperTest: FC<TooltipProps> = (props) => {
  const { onMouseEnter, onMouseLeave, showTooltipFn = () => true, ...rest } = props;

  rest.tooltip ??= rest.children;
  const [isHovered, setIsHovered] = useState(false);

  const targetNode = useRef<HTMLDivElement>(null);

  const handleMouseEnter = (e: MouseEvent<HTMLElement>) => {
    if (onMouseEnter) {
      onMouseEnter(e);
    }
    setIsHovered(true);
  };

  const handleMouseLeave = (e: MouseEvent<HTMLElement>) => {
    if (onMouseLeave) {
      onMouseLeave(e);
    }
    setIsHovered(false);
  };
  const showTooltip = useMemo(() => {
    return isHovered && showTooltipFn(targetNode.current);
  }, [isHovered, showTooltipFn]);

  return (
    <PopperFlow
      hideDelay={30000}
      onMouseEnter={handleMouseEnter}
      ref={targetNode}
      showTooltip={showTooltip}
      onMouseLeave={handleMouseLeave}
      {...rest}
    />
  );
};
export default ReactPopperTest;
